<!DOCTYPE html>
<html lang="en">
<head>
    <title>three.js webgl - FBX loader</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <link type="text/css" rel="stylesheet" href="./css/main.css">

</head>

<body>





</body>


<script type="module">
    import * as THREE from "./three.js/build/three.module.js";

    import { OrbitControls } from './three.js/examples/jsm/controls/OrbitControls.js';
    import { FBXLoader } from './three.js/examples/jsm/loaders/FBXLoader.js';
    import { GLTFLoader } from './three.js/examples/jsm/loaders/GLTFLoader.js';
    import { RGBELoader } from './three.js/examples/jsm/loaders/RGBELoader.js';
    import { RoughnessMipmapper } from './three.js/examples/jsm/utils/RoughnessMipmapper.js';
    import Stats from './three.js/examples/jsm/libs/stats.module.js';



    let  scene,camera,renderer,stats;
    var target = new THREE.Vector3(0, 30, 0);
    init()

    function init(){
        docamera();

        doscene();
        dorenderer();
      /// doinitLight();


        // dofbx();

        dogltf();

        dogrid();

     //   dospotLight();


    //    dodirectionallight();
        doAxsHelper();



        detextcure();
        doOrbitControls();
        dostats();
        doanimate();

    }

    //渲染器
    function dorenderer(){
        renderer = new THREE.WebGLRenderer();
        renderer.setSize( window.innerWidth, window.innerHeight );
        renderer.physicallyCorrectLights =true
        // 光线程度  色彩鲜艳程度  0-100
        renderer.toneMapping = THREE.ACESFilmicToneMapping;
        renderer.toneMappingExposure = 2;

        renderer.outputEncoding = THREE.sRGBEncoding;

        document.body.appendChild( renderer.domElement );
    }

    //场景
    function doscene(){
        scene = new THREE.Scene();
    }

    // 摄像头
    function docamera(){
        camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1,1000 );
        camera.position.set(150, 150, 200 );
        camera.lookAt( 0, 0, 0 );
    }

    // 加載gltf
    function dogltf(){
        const loader = new GLTFLoader().setPath( './gltf/house/' );
        loader.load( 'scene.gltf', function ( gltf ) {

            gltf.scene.traverse( function ( child ) {
                if ( child.isMesh ) {
                   // console.log(child)
                    child.material.emissive =  child.material.color;
                    child.material.emissiveMap = child.material.map ;
                    // TOFIX RoughnessMipmapper seems to be broken with WebGL 2.0
                    // roughnessMipmapper.generateMipmaps( child.material );
                }

            } );
            console.log(JSON.stringify(gltf))
            gltf.scene.rotation.x=0
            gltf.scene.position.x=0
            gltf.scene.position.y=0
            scene.add( gltf.scene );
            doanimate();
        } );
    }

    // 加载fbx
    function dofbx(){
        // 加载提示
        var manager = new THREE.LoadingManager();
        manager.onProgress = function(item, loaded, total){
            console.log(item, loaded, total);
        };



        const pmremGenerator = new THREE.PMREMGenerator( renderer );
        pmremGenerator.compileEquirectangularShader();


        new RGBELoader()
            .setDataType( THREE.UnsignedByteType )
            .setPath( './three.js/examples/textures/equirectangular/' )
            .load( 'royal_esplanade_1k.hdr', function ( texture ) {

                const envMap = pmremGenerator.fromEquirectangular( texture ).texture;

                scene.background = envMap;
                scene.environment = envMap;

                texture.dispose();
                pmremGenerator.dispose();

                doanimate();

                const roughnessMipmapper = new RoughnessMipmapper( renderer );





                //
                //
                // var fbx_loader = new FBXLoader(manager);
                //
                // console.log(333333)
                // //	fbx_loader.load( 'models/fbx/smallhouse.fbx', function(object){
                // fbx_loader.load( './fbx/struct.fbx', function(object){
                //     let cx = object.children[0].rotation._x
                //     let cy =object.children[0].rotation._y
                //     let cz = object.children[0].rotation._z
                //
                //
                //     //	#object.rotation.z=cy
                //     //	object.rotation.x=cx
                //     object.traverse(function(obj){
                //
                //         if(obj.isMesh){
                //
                //             obj.castShadow = true;
                //             obj.receiveShadow = true;
                //
                //             var prevMaterial = obj.material;
                //
                //             obj.material = new THREE.MeshPhongMaterial();
                //
                //             THREE.MeshBasicMaterial.prototype.copy.call( obj.material, prevMaterial );
                //
                //         }
                //
                //     })
                //
                //     object.castShadow=true
                //
                //     // console.log(Math.PI)
                //     // console.log((object))
                //     // console.log(cy*100)
                //     console.log("3333333333333")
                //     let dorotation = Math.abs(cx)-Math.abs(cy)-Math.abs(cz)
                //     dorotation=Math.abs(dorotation)*10
                //     console.log(object)
                //     console.log(cz)
                //     console.log(cy)
                //     console.log(cz)
                //
                //     object.rotation.x=4.7
                //     object.position.x=40
                //     object.position.y=40
                //     object.position.z=40
                //
                //     //object.rotation.x = -Math.PI/2 - Math.PI/12;
                //     console.log(object.position);
                //     // 材质渲染
                //     scene.add(object);
                //
                //     roughnessMipmapper.dispose();
                //
                //     doanimate();
                // }, onProgress, onError);

                var onProgress = function(xhr){
                    if(xhr.lengthComputable){
                        var percentComplete = xhr.loaded / xhr.total * 100;
                        console.log(Math.round(percentComplete, 2) + '% downloaded');
                    }
                };

                var onError = function(xhr){
                    console.error(xhr);
                };

            } );





    }





    // 平行光  類似太陽光
    function dodirectionallight(){
        const directionalLight = new THREE.DirectionalLight( 0xffeedd );
        directionalLight.position.set(10, 30, 20 );
        scene.add( directionalLight );
    }

    // 貼圖
    function detextcure(){
        var texture = new THREE.TextureLoader().load( "./textures/angus/cube_m00_c00.jpg" );
        var geometry = new THREE.BufferGeometry(31);
        var material = new THREE.MeshPhongMaterial({map:texture});
        let octahedron = new THREE.Mesh(geometry, material);
        octahedron.position.x=10
        octahedron.position.y=10
        octahedron.position.z=10
        scene.add(octahedron);
    }

    function doOrbitControls(){
        // 创建控制器
        const	controls = new OrbitControls(camera, renderer.domElement);
        controls.target.set(0, 0, 30);
        controls.target = target; //控制的target
        controls.autoRotate = true; //是否自动旋转
        controls.autoRotateSpeed = 0.5; //自动旋转速度，正比
    }

    //内存  帧数 仪表
    function dostats(){
        stats = new Stats();
        document.body.appendChild( stats.dom );

    }

    // 坐標系 红色代表 X 轴. 绿色代表 Y 轴. 蓝色代表 Z 轴.
    function doAxsHelper(){

        let axs  = new THREE.AxesHelper(1000)
        scene.add(axs)
    }
    // 坐標系
    function doAxsHelper2(){
        // const light = new THREE.HemisphereLight( 0xffffbb, 0x080820, 1 );
        // const helper = new THREE.HemisphereLightHelper( light, 100 );
        // scene.add( helper );

        const plane = new THREE.Plane( new THREE.Vector3( 1, 1, 0.2 ), 3 );
        const helper = new THREE.PlaneHelper( plane, 101, 0xffff00 );
        scene.add( helper );
    }

    // 地板
    function dogrid(){
        var grid3=new THREE.GridHelper(300,300,0xf0f0f0,"#A52A2A")
        scene.add(grid3)
    }

    //點光源
    function dospotLight(){
       const spotLight = new THREE.SpotLight( 0xA52A2A, 100000 );
        spotLight.position.set( 150,150, 150 );
        spotLight.angle = Math.PI / 4;
        spotLight.penumbra = 0.1;
        spotLight.decay = 2;
        spotLight.distance = 500;

        spotLight.castShadow = true;
        spotLight.shadow.mapSize.width = 1512;
        spotLight.shadow.mapSize.height = 1512;
        spotLight.shadow.camera.near = 10;
        spotLight.shadow.camera.far = 100;
        spotLight.shadow.focus = 1;
        scene.add( spotLight );

        const  lightHelper = new THREE.SpotLightHelper( spotLight );
        scene.add( lightHelper );
    }

    // 初始化灯光
    function doinitLight() {
        var directionalLight = new THREE.DirectionalLight( 0xffffff, 0.3 );//模拟远处类似太阳的光源
        directionalLight.color.setHSL( 0.1, 1, 0.95 );
        directionalLight.position.set( 0, 200, 0).normalize();
        scene.add( directionalLight );

        var ambient = new THREE.AmbientLight( 0x404040 ); //AmbientLight,影响整个场景的光源
        ambient.position.set(30,30,30);
        scene.add( ambient );
    }

    //循环渲染
    function doanimate(){
        requestAnimationFrame( doanimate );
        renderer.render( scene, camera );
        // 实时更新
        stats.update()
    }

</script>
</html>
